<template>
  <slot></slot>

  <hr style="margin: 20px 0" />

  <p class="p">动态 css v-bind() 形式</p>

  <hr style="margin: 20px 0" />

  <p :class="[wyn.p_el, wyn.border]">动态 css module 形式</p>
</template>

<script setup lang="ts">
// v-bind() 动态样式
// const color = ref("green");
const styles = ref({
  color: "green",
});

setTimeout(() => {
  styles.value.color = "skyblue";
}, 2000);

// 获取动态 css module 形式（一般用于写 tsx）
const css = useCssModule("wyn");
console.log(css);
</script>

<style scoped>
/* 一丶 :deep(样式类名) 样式穿透原理：就是把生成的签名属性放到当前样式类名上 */

/* 二丶 插槽选择器 :slotted 用于修改父级插槽内的样式 */
:slotted(.box) {
  color: red;
}

/* 三丶 :global 用于修改全局样式，用于替代 style 标签的这种写法 */
/* :global(div) {
  color: pink;
} */

/* ********************************************************************************************************** */

/* 四丶 v-bind() 动态样式 */
.p {
  /* color: v-bind("color"); */
  color: v-bind("styles.color");
}
</style>

<style module="wyn">
.p_el {
  color: brown;
}

.border {
  border: 1px solid blue;
}
</style>
